{% extends "base.html" %}
{% load static %}

{% block title %}GodJin · 版本介绍{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/version.css' %}">
{% endblock %}

{% block content %}

<!-- Hero Banner：与抖音页统一风格 -->
<section class="hero text-white text-center"
         style="background: url('{% static "picture/version.jpg" %}') center/cover no-repeat;">
  <div class="container py-5">
    <h1 class="display-5 fw-bold mb-3">GodJin · Release Notes</h1>
    <p class="lead mb-4">「把版本变成故事，把进步写给未来」</p>
    <a href="/introduce" class="btn btn-light btn-lg shadow-sm">查看屌丝发言</a>
  </div>
</section>


    
<!-- 最新版本卡片 -->
<section id="latest" class="section">
  <div class="container">

    <!-- 头像 + 标题 -->
    <div class="text-center mb-5">
      <img src="{% static 'picture/jinzhu.jpg' %}" alt="头像" 
           class="rounded-circle shadow-lg mb-3" width="150" height="150">
      <h1 class="fw-bold">你好，我是 GodJin</h1>
      <p class="text-muted">一名自媒体·技术探索者</p >
    </div>
  </div>
      
      
  <div class="container">
    <div class="card border-0 shadow-sm version-card">
      <div class="card-body p-4 p-md-5">
        <div class="d-flex align-items-center justify-content-between flex-wrap gap-2 mb-3">
          <h2 class="h3 mb-0">v0.0.1</h2>
          <span class="badge bg-success px-3 py-2">最新</span>
        </div>
        <p class="text-muted mb-4">发布日期：2025-10-12</p>

        <!-- 特性一览 -->
        <div class="feature-grid">
          <div class="feature">
            <div class="feature-dot"></div>
            <div>
              <h6 class="mb-1">抖音爬取</h6>
              <p class="mb-0 text-muted">作者单视频爬取，基于浏览器发fetch</p>
            </div>
          </div>
          <div class="feature">
            <div class="feature-dot"></div>
            <div>
              <h6 class="mb-1">樱花</h6>
              <p class="mb-0 text-muted">ts片段合并下载返回，基于浏览器得到m3u8</p>
            </div>
          </div>
            
            
          <div class="feature">
            <div class="feature-dot"></div>
            <div>
              <h6 class="mb-1">cs饰品</h6>
              <p class="mb-0 text-muted">基于steamdt拿数据</p>
            </div>
          </div>
            
{#            #}
{#          <div class="feature">#}
{#            <div class="feature-dot"></div>#}
{#            <div>#}
{#              <h6 class="mb-1">移动端修复</h6>#}
{#              <p class="mb-0 text-muted">修正导航遮挡与排版错位问题。</p>#}
{#            </div>#}
{#          </div>#}
            
            
        </div>

        <hr class="my-4">

        <!-- 快速动作 -->
{#        <div class="d-flex flex-wrap gap-2">#}
{#          <a class="btn btn-primary shadow-sm" href="#">下载构建包</a>#}
{#          <a class="btn btn-outline-secondary" href="#timeline">查看更新路线</a>#}
{#          <a class="btn btn-outline-secondary" href="/">返回首页</a>#}
{#        </div>#}
          
          
      </div>
    </div>
  </div>
</section>

<!-- 时间轴（不依赖 Bootstrap JS） -->
<section id="timeline" class="section">
  <div class="container">
    <h3 class="h4 mb-4 fw-bold">版本时间轴</h3>

<div class="timeline">
  <!-- v0.0.1 -->
  <div class="tl-item">
    <div class="tl-dot"></div>
    <div class="tl-content card shadow-sm border-0">
      <div class="card-body">
        <!-- 标题部分 -->
        <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-2">
          <h5 class="mb-0">v0.0.1</h5>
          <span class="text-muted small">2025-09-08</span>
        </div>
        <!-- 更新内容 -->
        <ul class="mb-3 text-muted">
          <li>抖音视频爬取</li>
          <li>樱花动漫爬取，只能通过下载给观看</li>
          <li>cs饰品爬取与分析</li>
        </ul>

        <!-- 我的留言 -->
        <div class="p-3 bg-light rounded-3 border position-relative">
          <span class="position-absolute top-0 start-50 translate-middle badge rounded-pill bg-primary">
            作者留言
          </span>
          <p class="mb-0 mt-3 text-muted">
            哎，很难，但我会加油：<br>
            - 现在功能都不稳定，需要优化代码结构<br>
            - 抖音视频后续预计升级逆向，速度更快，<br>
            - 视频爬取不会只有抖音和樱花，后续预计向全平台拓展<br>
            - 商品爬取不止于cs，会拓展至所有商品，全国，全世界的商品，这将是一个巨大的比价平台<br>
          </p>
        </div>

      </div>
    </div>
  </div>
</div>

{##}
{#      <!-- 1.1.0 -->#}
{#      <div class="tl-item">#}
{#        <div class="tl-dot"></div>#}
{#        <div class="tl-content card shadow-sm border-0">#}
{#          <div class="card-body">#}
{#            <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-2">#}
{#              <h5 class="mb-0">v1.1.0</h5>#}
{#              <span class="text-muted small">2025-08-15</span>#}
{#            </div>#}
{#            <ul class="mb-0 text-muted">#}
{#              <li>新增登录/注册，接入基础权限</li>#}
{#              <li>新增对外 API（Token 校验）</li>#}
{#              <li>修复搜索分页</li>#}
{#            </ul>#}
{#          </div>#}
{#        </div>#}
{#      </div>#}
{##}
{#      <!-- 1.0.0 -->#}
{#      <div class="tl-item">#}
{#        <div class="tl-dot"></div>#}
{#        <div class="tl-content card shadow-sm border-0">#}
{#          <div class="card-body">#}
{#            <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-2">#}
{#              <h5 class="mb-0">v1.0.0</h5>#}
{#              <span class="text-muted small">2025-07-01</span>#}
{#            </div>#}
{#            <ul class="mb-0 text-muted">#}
{#              <li>GodJin 初版发布（Django + Bootstrap）</li>#}
{#              <li>包含首页 / 关于 / 联系页</li>#}
{#              <li>基础静态资源与打包流程</li>#}
{#            </ul>#}
{#          </div>#}
{#        </div>#}
{#      </div>#}

    </div><!-- /timeline -->
  </div>
</section>

<!-- CTA 底栏 -->
<section class="section pb-0">
  <div class="container">
    <div class="card border-0 shadow-sm text-center cta">
      <div class="card-body p-4 p-md-5">
        <h4 class="fw-bold mb-2">想看更细的改动？</h4>
        <p class="text-muted mb-4">变更日志、里程碑、任务板都已经整理好。</p>
        <a class="btn btn-dark btn-lg shadow-sm" href="#">打开完整 Changelog</a>
      </div>
    </div>
  </div>
</section>

{% endblock %}

{% block extra_js %}
<script>
  // 提供占位图给外部 JS 使用
  window.VERSION_COVER = "{% static 'picture/version.jpg' %}";
</script>
<script src="{% static 'js/version.js' %}"></script>
{% endblock %}